<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row justify-content-end">
            <!-- 左边内容 -->
            <div class="col-lg-4 position-fixed border-right leftCon">
                <!-- 导航栏 -->
                <header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
                    <a href="/index.html" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
                    <ul class="nav mr-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link text-dark font-weight-bold">门店</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
                        </li>
                        <li class="nav-item">
                            <a href="/menu.html" class="nav-link text-dark font-weight-bold">菜单</a>
                        </li>
                    </ul>
                    <span class="iconfont icon-menu" id="showBtn"></span>
                </header>

                <!-- 标题与登录注册 -->
                <div class="d-flex align-items-center login">
                    <div class="px-0 px-lg-5">
                        <h1 class="font-weight-bold py-3">登录或创建一个新账户 <span class="iconfont"> <img src="./images/咖啡.png"
                                    style="width: 50px; height: 50px;"></span></h1>
                        <div class="d-none d-sm-block my-3">
                            <a href="#" class="text-success">
                                <span class="iconfont icon-denglu"></span>
                                <span>登录</span>
                            </a>
                            <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 右边内容 -->
            <div class="col-lg-8 bg-light">
                <!-- 轮播图 -->
                <div class="row">
                    <div class="carousel slide" id="pic" data-ride='carousel'>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="https://active.starbucks.com.cn/shuinfo/app-revamp/7a08a2a1-7af7-41d2-8332-55dd21824335.png"
                                    class="img-fluid" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <form style="margin: 80px 300px">
                        <div>
                            <input type="text" placeholder="用户名或电子邮箱"
                                style="width: 600px; height: 30px; font-size: 24px; border:none; border-bottom: 1px solid rgb(122, 253, 51); outline:none; color:#CCC;" />
                        </div>
                        <div>
                            <input type="password" placeholder="密码"
                                style="width: 600px; height: 30px; font-size: 24px; margin-top: 40px; border:none; border-bottom: 1px solid rgb(122, 253, 51); outline:none; color: #CCC;" />
                        </div>
                    </form>
                    <button
                        style="width: 100px; height: 40px; border-radius: 35px; border: 1px solid black; background-color: antiquewhite; font-size: 24px; margin-left: 300px;">登录</button>
                </div>
            </div>
            <script src="jquery-3.5.1.min.js"></script>

            <script src="bootstrap-4.5.0-dist/js/bootstrap.js"></script>

            <script>
                $('#showBtn').on('click', function () {
                    $('.menu').removeClass('hide').addClass('show');
                    shadowMenu();
                });
                $('#closeBtn').on('click', function () {
                    $('.menu').removeClass('show').addClass('hide');
                    shadowMenu();
                });

                $(window).resize(shadowMenu);

                //当菜单弹出的时候，不要让body出现滚动条。当菜单消失的时候再让body出现滚动条
                function shadowMenu() {
                    //只有当屏幕尺寸小于992，以及menu菜单是显示的状态，这时才要干掉body的滚动条
                    if ($(window).innerWidth() <= 992 && $('.menu').hasClass('show')) {
                        //console.log(1);
                        $('body').css('overflow', 'hidden');
                    } else {
                        $('body').css('overflow', 'auto');
                    }
                }
            </script>

</body>

</html>